<template>
  <div>
    <div style="display: inline-block; width: 100%">
      <span class="tool-bar-item" v-show="buttons.includes('save')"><el-button type="primary" size="mini"
          @click="handleSave"
          v-if="status == 1 || status == 2 || (activeSaveMethod && activeSaveMethod())">保存</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('delete')" v-if="status == 2"><el-button type="danger"
          size="mini" @click="handleDelete">{{
            $t("common.delete")
          }}</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('submit')" v-if="status == 2"><el-button size="mini"
          @click="handleSubmit">提交</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('unsubmit')" v-if="status == 3"><el-button size="mini"
          @click="handleUnSubmit">撤销提交</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('approve')" v-if="status == 3"><el-button size="mini"
          @click="() => handleApprove(true)">审核</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('unapprove')" v-if="status == 4"><el-button size="mini"
          @click="() => handleApprove(false)" type="danger">反审核</el-button></span>

      <span class="tool-bar-item" v-show="buttons.includes('select-document')"><el-button size="mini"
          @click="() => handleSelectDoument(false)">选单</el-button></span>
      <span class="tool-bar-item">
        <el-dropdown @command="handlePushCommand" v-show="showPushButton">
          <el-button size="mini">
            下推<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <slot name="pushButton"></slot>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
      <span class="tool-bar-item" v-show="showMoreButton">
        <el-dropdown @command="handleMoreCommand">
          <el-button size="mini">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="export" icon="el-icon-download"
              v-show="buttons.includes('export')">导出</el-dropdown-item>
            <el-dropdown-item command="import" icon="el-icon-upload2"
              v-show="buttons.includes('import')">导入</el-dropdown-item>
            <el-dropdown-item command="print" icon="el-icon-printer"
              v-show="buttons.includes('print')">打印</el-dropdown-item>
            <el-dropdown-item command="copy" icon="el-icon-document-copy"
              v-show="buttons.includes('copy')">复制</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>

      <span style="margin-left: 10px; float: right"><el-link class="el-icon-refresh" @click="handleRefresh">{{
        $t("common.refresh")
          }}</el-link></span>
      <span style="margin-left: 10px; float: right" v-show="buttons.includes('log')"><el-link class="el-icon-notebook-2"
          @click="handleShowLog">日志</el-link></span>
      <span style="margin-left: 10px; float: right" v-show="buttons.includes('back')"><el-link class="el-icon-back"
          @click="handleReturnList">返回列表</el-link></span>
    </div>
    <el-drawer direction="rtl" :visible.sync="logDrawer" :with-header="false" size="40%">
      <div v-if="logDrawer">
        <log-panel :moduleCode="moduleCode" :objectId="objectId"></log-panel>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import logPanel from "@/views/logs/operationlog.vue";
export default {
  components: {
    logPanel,
  },
  data() {
    return {
      showSearch: false,
      logDrawer: false,
    };
  },
  methods: {
    handleDelete() {
      this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
        confirmButtonText: this.$t("common.ok"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          let id = this.objectId;
          this.$emit("delete", { id: id });
        })
        .catch(() => { });
    },
    handleRefresh() {
      this.$emit("refresh");
    },
    handleSave() {
      this.$emit("save");
    },
    handleSubmit() {
      this.$emit("submit");
    },
    handleUnSubmit() {
      this.$emit("unsubmit");
    },
    handleReturnList() {
      this.$emit("back");
    },
    handleSearch() {
      this.showSearch = !this.showSearch;
    },
    handleApprove(approved) {
      this.$emit("approve", approved);
    },
    handlePush() {
      this.$emit("push");
    },
    handleShowLog() {
      this.logDrawer = true;
    },
    handleMoreCommand(command) {
      this.$emit(command);
    },
    handlePushCommand(command) {
      this.$emit("pushButtonClick",command);
    },
  },
  mounted() { },
  computed: {
    showMoreButton() {
      return (
        this.buttons &&
        (this.buttons.includes("import") ||
          this.buttons.includes("export") ||
          this.buttons.includes("print") || this.buttons.includes("copy"))
      );
    },
    showPushButton() {
      return this.buttons && (this.buttons.includes("push"))
    }
  },
  props: {
    buttons: {
      type: Array,
      default: () => ["delete", "search", "log"],
    },
    moduleCode: {
      type: String,
      default: null,
    },
    objectId: {
      type: String,
      default: null,
    },
    status: {
      type: Number,
      default: 1
    },
    activeSaveMethod: {
      type: Function
    }
  },
};
</script>
<style scoped>
.tool-bar-item {
  padding-right: 10px;
}
</style>